<template>
  <div class="letter-repeat" v-if="addVisible">
    <div class="letter-repeat-centent">
      <div class="letter-repeat-centent-header">
        <span></span>
        <span>{{ titleText }}</span>
        <span><i class="el-icon-close" @click="closeLetterDetail(0)"></i></span>
      </div>
      <div class="letter-repeat-centent-body">
        <div class="letter-user-text" v-if="this.eidtType=='edit'">
          <div v-if="letterOption">
            <div class="letter-user-text-header">
              <div class="letter-user-text-header-icon">
                留言
              </div>
              <div class="letter-user-text-header-line" v-if="tabUserType==1">
                <p v-if="tabType==1">{{ letterOption.is_anonymous == 1 ? '匿名' : letterOption.user.realname }}</p>
                <p v-else>{{ letterOption.is_anonymous == 1 ? '匿名提交' : letterOption.user.realname }}</p>
                <!--              <p v-else>{{ letterOption.user.realname }}<span v-if="letterOption.is_anonymous==1">(匿名提交)</span></p>-->
                <p>{{ letterOption.create_time }}</p>
              </div>
              <div class="letter-user-text-header-line" v-else>
                <p v-if="tabType==1">{{ letterOption.is_anonymous == 1 ? '匿名' : letterOption.parents.name }}</p>
                <p>{{ letterOption.create_time }}</p>
              </div>
            </div>
            <div class="letter-user-text-body">
              {{ letterOption.body }}
            </div>
            <div class="letter-user-text-line" v-if="picOption.length">
              <viewerModle type="2" :imgSrc="picOption" widthNumber="mini"></viewerModle>
            </div>
            <div class="editer-rapeat" v-if="replyBodyStatus">
              <div class="letter-user-text-header">
                <div class="letter-user-text-header-line">
                  <p>{{ letterOption.receive.realname }}</p>
                  <p>{{ letterOption.reply ? letterOption.reply_time : '' }}</p>
                </div>
                <div class="letter-user-text-header-icon">
                  回复
                </div>
              </div>
              <div class="word-text-box" v-if="letterOption.reply">
                <div class="letter-user-text-body">
                  {{ letterOption.reply }}
                </div>
              </div>
              <div v-else class="word-text-box">尚未回复</div>
            </div>
          </div>
        </div>
        <div class="getUser" v-else>
          <div class="getUser-line">
            <span>收件人：</span>
            <el-button size="small" @click="showLetterBox">选择收件人</el-button>
            <span style="margin-left: 5px;">{{ getUser ? getUser.realname : '' }}</span>
          </div>
          <div class="getUser-line getUser-line-type">
            <span class="getUser-line-left">意见内容</span>
            <span class="getUser-line-right" @click="getUserType()">
              匿名提交 <i class="iconfont"
                      :class="postData.is_anonymous?'activeuser icondagou':'iconxuanzhongyuandian'"></i>
            </span>
          </div>
        </div>
        <!--        tabType 我的发件 2 ，我的收件且已回复，不需要编辑框  -->
        <div v-if="showTextarea">
          <textarea name="" id="" cols="30" rows="10" class="letter-repeat-word" :placeholder="placeholderText"
                    v-model="textbody"></textarea>
        </div>
        <p class="Tips-info" v-if="postData.is_anonymous">提示：匿名信息收件人不可回复</p>
      </div>
      <div class="letter-repeat-centent-footer">
        <span @click="saveLetterFn" v-if="showTextarea" class="saveBtn">确认并提交</span>
        <span class="closeBtn_letter" @click="closeLetterDetail(0)">返回</span>
      </div>
    </div>
    <!--    老师单选 -->
<!--    <letterUser :visible.sync="letterUserVisible" @userChange="userChange"></letterUser>-->
    <singleTeacherModle :visible.sync="letterUserVisible" @studentFn="userChange"
                        :dynamicTagsArray="getUser"></singleTeacherModle>
  </div>
</template>

<script>
import letterUser from "@/components/dialog/letterUser";
import {mapGetters} from "vuex";

export default {
  components: {
    letterUser
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  props: ['visible', 'letterId', 'tabType', 'tabUserType', 'eidtType','rootStatus'], // tabType 1 我的收件 0 我的发件; tabUserType 1校园 2 家长
  // eidtType add 添加 edit 编辑 // rootStatus true 查看全站数据需要判断是否能回复 false 个人查看
  watch: {
    visible() {
      this.addVisible = this.visible
      if (this.visible) {
        // showTextarea
        this.titleText = this.eidtType === 'edit' ? '信件详情' : '新增信件';
        if (this.eidtType === 'edit') {
          this.getDetailFn('init')
          this.$emit('changeStatus', this.tabUserType)// 更新试图
        }else{
          this.placeholderText = '请留下宝贵意见'
          this.showTextarea = true;
        }
      }else{
        this.letterOption = null;
        this.replyBodyStatus = false;
        this.showTextarea = false;
        this.textbody = '';
      }
    }
  },
  data() {
    return {
      letterUserVisible: false,
      addVisible: this.visible,
      titleText: '',
      letterOption: null,
      getUser: null,
      showTextarea: false, // 展示输入框
      postData: {
        receive_id: '', // 	字符串 	必填 	1 	- 	收件人
        title: '', // 	字符串 	必填 	1 	- 	标题
        body: '', // 	字符串 	必填 	1 	- 	内容
        is_anonymous: 0, // 	tinyint 	必填 	1 	- 	是否匿名0否1是
      },
      textbody: '',
      placeholderText: '',
      replyBodyStatus: false, // 显示回复内容
      picOption: []
    }
  },
  mounted() {
  },
  methods: {
    async saveLetterFn() {
      //  tabType 1 我的收件 回复收件内容； 0 我的发件 发布邮件
      if (this.tabType) {
        if (!this.textbody) {
          this.$message.error('填写回复内容')
          return
        }
        let optionreply = {
          id: this.letterOption.id,
          reply: this.textbody
        }
        let data = await this.$post(this.tabUserType === 1 ? this.api.letter.tearcher.repeat : this.api.letter.parents.repeat, this.transfromJson(optionreply))
        if (!data.code) {
          this.textbody = '';
          this.getDetailFn('reply')
          this.$message.success(data.msg)
        } else {
          this.$message.error(data.msg)
        }
      } else {
        if (!this.getUser) {
          this.$message.error('选择收件人')
          return
        }
        if (!this.textbody) {
          this.$message.error('填写发件内容')
          return
        }
        this.postData.receive_id = this.getUser ? this.getUser.id : ''
        this.postData.body = this.textbody
        let data = await this.$post(this.api.letter.tearcher.add, this.transfromJson(this.postData))
        console.log(data)
        if (!data.code) {
          this.getUser = '';
          this.textbody = '';
          this.postData.is_anonymous = 0;
          this.$message.success(data.msg);
          this.$emit('changeStatus', this.tabUserType)
        } else {
          this.$message.error(data.msg)
        }
      }
    },
    getUserType() {
      this.postData.is_anonymous = this.postData.is_anonymous ? 0 : 1;
    },
    closeLetterDetail() {
      this.$emit('update:visible', false)
    },
    showLetterBox() {
      this.letterUserVisible = true
    },
    userChange(option) {
      console.log('选中的负责人：', option)
      this.getUser = this.transfromJson(option);
    },
    transfromJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    async getDetailFn(option) {
      let data = await this.$post(this.tabUserType === 1 ? this.api.letter.tearcher.edit : this.api.letter.parents.edit, {id: this.letterId})
      this.letterOption = this.transfromJson(data.vo);
      this.picOption = this.letterOption.pic?this.letterOption.pic.split(','):[]
      // 判断展示的数据
      this.placeholderText = '回复：' + (Number(this.tabUserType) === 2?this.letterOption.parents.name:this.letterOption.user.realname);
      // 回复的消息将刷新列表页面
      // showTextarea 输入款

      if (option === 'reply') {
        this.letterOption.reply = data.vo.reply
        this.letterOption.reply_time = data.vo.reply_time
        this.replyBodyStatus = true
        this.showTextarea = false
        this.$emit('changeStatus', this.tabUserType)
      }
      // 我的收信 家长投信的回复 家长的投信 1 校园 2 家长
      // rootStatus 为 true时需要判断是不是园长本人的 false 个人的回复
      if(this.rootStatus && this.userInfo.id !== data.vo.receive.id){
        return
      }
      if(!data.vo.is_anonymous && (Number(this.tabType)===1 || Number(this.tabUserType) === 2)){
        if(option==='init' && data.vo.reply){
          this.replyBodyStatus = true
        }
        if(option==='init' && !data.vo.reply){
          this.showTextarea = true // 开启回复
        }
      }
      // 我的发件展示回复
      if(!data.vo.is_anonymous && !Number(this.tabType) && data.vo.reply){
        this.replyBodyStatus = true
      }
    }
  }
}
</script>
<style scoped>
.letter-repeat {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.letter-repeat-centent {
  background: #fff;
  border-radius: 8px;
  width: 50%;
  height: 560px;
  overflow: hidden;
  box-shadow: 0 0 20px #666;
  z-index: 9;
  display: flex;
  flex-direction: column;
}

.letter-repeat-centent-header {
  height: 50px;
  line-height: 50px;
  display: flex;
  background: #595c85;
  color: #fff;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
}

.letter-repeat-centent-header span {
  display: block;
}

.letter-repeat-centent-header span:first-child {
  width: 50px;
}

.letter-repeat-centent-header span:last-child {
  width: 50px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
}

.letter-repeat-centent-header span:nth-child(2) {
  flex: 1;
  text-align: center;
}

.letter-repeat-centent-body {
  flex: 1;
  padding: 10px;
}

.letter-repeat-centent-footer {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.letter-repeat-centent-footer span {
  display: block;
  height: 36px;
  width: 100px;
  border-radius: 4px;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}

.letter-repeat-centent-footer span.saveBtn {
  background: #595c85;
  border: 1px solid #595c85;
  color: #fff;
  margin-right: 20px;
}

.letter-repeat-centent-footer span.closeBtn_letter {
  border: 1px solid #ddd;
  color: #333;
}

.letter-user-text {
  width: 100%;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.letter-user-text-header {
  margin-bottom: 10px;
  display: flex;
}

.letter-user-text-header .letter-user-text-header-line p:last-child {
  color: #999;
}

.letter-user-text-header-icon {
  width: 40px;
  height: 34px;
  background: #eb7d00;
  color: #fff;
  line-height: 34px;
  text-align: center;
  border-radius: 4px;
  margin-right: 10px;
}

.letter-user-text-body {
  background: #ebeeff;
  padding: 10px;
  border-radius: 4px;
  color: #333;
  max-width: 80%;
}

.letter-repeat-word {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 10px;
  font-size: 16px;
  background: #f7f7f9;
  width: 100%;
  font-style: normal;
  resize: none;
  height: 80px;
}

.editer-rapeat {
  margin-top: 20px;
}

.editer-rapeat .letter-user-text-header {
  justify-content: flex-end;
  text-align: right;
}

.editer-rapeat .letter-user-text-header .letter-user-text-header-icon {
  margin-left: 10px;
  margin-right: 0;
  background: #58ac82;
}

.word-text-box {
  display: flex;
  justify-content: flex-end;
}

.getUser {
  padding-top: 30px;
}

.getUser-line {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.getUser-line-type {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.getUser-line-left {
  flex: 1;
}

.getUser-line-type .getUser-line-right {
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
  text-align: right;
}

.Tips-info {
  padding: 3px 10px;
  color: #fb962d;
}

.letter-user-text-line{
  padding: 10px 0;
}
.activeuser {
  color: #eca32e;
}
</style>
